import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import PropTypes from "prop-types";
import './index.css';
import {BrowserRouter, Switch, Route, withRouter} from 'react-router-dom';
import routers from './router';
import {Layout, Menu} from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PictureOutlined
} from '@ant-design/icons';
import 'antd/dist/antd.css';


const {Header, Sider, Content} = Layout;
const {SubMenu} = Menu;

class MenuLayout extends React.Component {
    static propTypes = {
        match: PropTypes.object.isRequired,
        location: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired
    };

    historyPush(path: string) {
        const {history} = this.props as any;
        history.push(path);
    }

    render() {
        return (
            <Menu
                theme="dark"
                mode="inline"
                onSelect={(args) => this.historyPush(args.key as string)}
            >
                <SubMenu key="/threejs" title="Three.js" icon={<PictureOutlined/>}>
                    <Menu.Item key="/threejs/hello-world">HelloWorld</Menu.Item>
                    <Menu.Item key="/threejs/draw-line">画线</Menu.Item>
                </SubMenu>
            </Menu>
        )
    }
}

// https://reactrouter.com/core/api/withRouter
// 在没有用<route></route>包裹的组件中，使用 history 必选用 withRouter 包裹组件
// https://reactrouter.com/core/api/Hooks/usehistory
// 有<route></route>包裹的组件中，可以使用 const history = useHistory() 来获得 history
const MenuLayoutRouter = withRouter(MenuLayout as any);

function MainLayout() {
    // const history = useHistory();
    // function historyPush() {
    //     history.push("/home");
    // }

    const [collapsed, setCollapsed] = useState(false);
    const toggle = () => {
        setCollapsed(!collapsed);
    }

    return (
        <BrowserRouter>
            <Layout className="main-layout">
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    <div className="logo"/>
                    <MenuLayoutRouter/>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{padding: 0}}>
                        <div className="collapsed">
                            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                className: 'trigger',
                                onClick: toggle,
                            })}
                        </div>
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        <Switch>
                            {routers.map((route, index) => {
                                return (<Route key={index}
                                               path={route.path}
                                               exact={route.exact}
                                               component={route.component}/>)
                            })}
                        </Switch>
                    </Content>
                </Layout>
            </Layout>
        </BrowserRouter>
    );
}

ReactDOM.render(
    <MainLayout/>,
    document.getElementById('root')
);
//
// ReactDOM.render(
//     <React.StrictMode>
//         <MainLayout></MainLayout>
//     </React.StrictMode>,
//     document.getElementById('root')
// );
